<template>
    <div class="index">
        <van-swipe>
            <van-swipe-item class="swipe-item" v-for="item in swipeImages" :key="item.id">
                <img v-lazy="item.image"/>
            </van-swipe-item>
        </van-swipe>
        <ul class="grid">
            <li v-for="item in menu" :key="item.title">
                <div @click="goto(item.link)">
                    <img :src="item.image"/>
                    <h3>{{item.title}}</h3>
                </div>
            </li>
        </ul>
        <img class="banner" src="../../assets/index/banner_2.png" alt/>
        <!-- 代理 -->
        <ul class="agent">
            <li v-for="item in agentList" :key="item.levelId">
                <div style="text-align:center">
                    <!--                <div>-->
                    <h3>{{item.name}}</h3>
                    <!-- <p>{{item.levelRemark}}</p> -->
                    <button @click="goVipGoods(item.levelId)">立即购买</button>
                </div>
                <img :src="item.icon" alt/>
            </li>
        </ul>
    </div>
</template>

<script>
    import {
        Swipe,
        SwipeItem,
        Lazyload,
        TabbarItem,
        NoticeBar,
        Search,
        Row,
        Col,
        Rate
    } from "vant";
    import api from "../../utils/restful";

    export default {
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [NoticeBar.name]: NoticeBar,
            [Search.name]: Search,
            [Row.name]: Row,
            [Col.name]: Col,
            [Rate.name]: Rate
        },

        data() {
            return {
                swipeImages: [],
                APPID: 'wx6580046b0e1b14ee',
                menu: [
                    {
                        title: "会员主页",
                        image: require("../../assets/index/ios-contact.png"),
                        link: "vip"
                    },
                    {
                        title: "团队中心",
                        image: require("../../assets/index/ios-contacts.png"),
                        link: "member"
                    },
                    {
                        title: "商城",
                        image: require("../../assets/index/ios-mall.png"),
                        link: "index"
                    },

                    {
                        title: "补货订单",
                        image: require("../../assets/index/ios-analytics.png"),
                        link: "memberorder"
                    },
                    {
                        title: "代理补货",
                        image: require("../../assets/index/md-cube.png"),
                        link: "replenish"
                    },
                    {
                        title: "提货链接",
                        image: require("../../assets/index/md-analytics.png"),
                        link: "pickup"
                    },
                    {
                        title: "代理升级",
                        image: require("../../assets/index/md-upgrade.png"),
                        link: "upgrade"
                    },
                    {
                        title: "等级订单",
                        image: require("../../assets/index/md-business.png"),
                        link: "levelorder"
                    }
                ],
                agentList: [],
                memberInfo: '',
            };
        },
        created() {
            /* 2020 520 修改的部分 */
            let openId = localStorage.getItem("openId");
            // let openId = 'fhsdioghwsio13213';
            // if (!openId) {
            //     let code = this.getUrlParam("code");
            //     if (code) {
            //         console.log(code);
            //         this.$axios({
            //             method: "post",
            //             url: api.getOpenId,
            //             params: {
            //                 jsCode: code
            //             }
            //         }).then(res => {
            //             console.log(res);
            //             if (res.data) {
            //                 localStorage.setItem("openId", res.data);
            //                 // this.$toast(res.data);
            //             }
            //         });
            //     } else {
            //         this.getCode();
            //     }
            // }
        },
        mounted() {
            this.getBanner();
            this.getVipShow();
            this.getBannerShow();
            //this.getMemberInfo();
        },
        methods: {
            getMemberInfo(link) {
                this.$axios({
                    method: "get",
                    url: api.memberInfo,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    this.memberInfo = res.data;
                    this.$router.push({name: link});
                });
            },
            getCode() {
                let local = location.href;
                local = local.split("#")[0];
                location.href =
                    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                    this.APPID +
                    "&redirect_uri=" +
                    encodeURIComponent(local) +
                    "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
            },
            getUrlKey(name) {//获取url 参数
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
            },
            getUrlParam(name) {
                //封装方法
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                let r = window.location.search.substr(1).match(reg); //匹配目标参数
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            },
            getBanner() {
                this.$axios({
                    method: "get",
                    url: api.bannerList
                }).then(res => {
                    console.log(res);
                    this.swipeImages = res.data;
                });
            },
            getVipShow() {
                this.$axios({
                    method: "get",
                    url: api.levelList
                }).then(res => {
                    console.log(res);
                    // this.swipeImages = res.banner;
                    this.agentList = res.data;
                });
            },
            getBannerShow() {
                this.$axios({
                    method: "get",
                    url: api.bannerList
                }).then(res => {
                    console.log(res);
                    this.swipeImages = res.data;
                });
            },
            goto(link) {
                if (link == "index") {
                    this.$toast("该功能正在开发中...");
                } else if (link == "vip" || link == "member" || link == "memberorder" || link == "replenish" || link == "pickup") {
                    this.getMemberInfo(link);
                } else {
                    this.$router.push({name: link});
                }
            },
            goVipGoods(levelId) {
                this.$router.push({name: "vipgoods", query: {levelId: levelId}});
            }
        }
    };
</script>

<style lang="less" scoped>
    @import "~style/common.less";

    .index {
        min-height: 100vh;
        background-color: #edf2f7;

        .grid {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            text-align: center;
            background-color: #edf2f7;
            margin: 0 auto;
            padding: 15px;

            li {
                flex-basis: 25%;
                margin-bottom: 5px;

                img {
                    height: 30px;
                    width: 30px;
                }

                h3 {
                    .font-dpr(12px);
                    color: @fontColorP;
                    font-weight: 400;
                    line-height: 2;
                }
            }
        }

        /deep/ .van-swipe {
            // border: 1px solid red;
            text-align: center;

            img {
                width: 100%;
            }
        }

        .banner {
            max-width: 100%;
            background-size: cover;
        }
    }

    .van-tabbar {
        height: 48px;
        // transform: translateY(-50%);
        &-item {
            color: @fontColorH3 !important;

            &--active {
                color: @priColor !important;
            }

            &__icon {
                .font-dpr(16px) !important;
            }

            &__text {
                .font-dpr(12px) !important;
            }
        }
    }

    /deep/ .van-nav-bar .van-icon {
        .font-dpr(28px) !important;
        color: @fontColorP !important;
    }

    .product-title {
        .textoverflow(1);
    }

    .agent {
        // border:1px solid red;
        position: relative;
        width: 80vw;
        padding: 20px;
        margin: 0 auto;

        li {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #080b14;
            box-shadow: 0px 1px 21px 0px rgba(210, 216, 217, 0.2);
            border-radius: 15px;
            margin-top: 20px;

            &:first-child {
                margin-top: 0;
            }

            h3 {
                color: #fff;
                .font-dpr(16px);
                line-height: 2;
            }

            p {
                color: @fontColorP;
                .font-dpr(14px);
                line-height: 1.5;
            }

            img {
                width: 80px;
            }

            button {
                width: 100px;
                height: 25px;
                background: #fff;
                border-radius: 20px;
            }
        }
    }
</style>
